<template>
  <div>
    <input type="text" v-model="dogName" /> <br />
    <input type="text" v-model.trim="bf.name" />
    <input type="text" v-model.number="bf.age" />
    <input type="text" v-model.trim="bf.gender" /> <br />
    <input type="text" v-model.trim="gf.name" />
    <input type="text" v-model.number="gf.age" />
    <input type="text" v-model.trim="gf.gender" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      dogName: "小班同学",
      bf: {
        name: "王一博",
        age: 24,
        gender: "男",
        xgg: {
          name: "ruiky",
        },
      },
      gf: {
        name: "迪丽热巴",
        age: 24,
        gender: "女",
      },
    };
  },
  // 侦听器：侦听 组件数据变化
  watch: {
    // a.函数格式:只 侦听 同名的 data “变量”，不能 侦听 变量保存对象里的 子属性
    dogName(newName) {
      console.log(newName);
    },
    // b.配置对象格式：侦听整个对象所有属性
    bf: {
      // 启动深度监听（监听 对象 或 数组 里的 属性 和成员的变动）
      deep: true,
      handler(new1) {
        console.log(new1);
      },
    },
    // c.配置对象格式:侦听对象中指定属性
    "gf.name": {
      handler(new1) {
        console.log(new1);
      },
      // 首次加载时 就立即执行一次
      immediate: true,
    },
  },
};
</script>